<template>
  <div>
    <transition name="fade">
      <div class="t-modal-mask" v-show="visible"></div>
    </transition>
    <div class="t-modal-wrapper vertical-center-modal" v-show="wrapShow">
      <transition name="ease">
        <div class="t-modal" :style="{ width }" v-show="visible">
          <a class="t-modal-close" v-if="closeable" @click="cancel"></a>
          <div class="t-modal-firwork" v-if="firework"></div>
          <div class="t-modal-content"   :style="contentStyle">
            <div class="t-modal-header" v-if="showTitle">{{ title }}</div>
            <div class="t-modal-body">
              <slot>
              </slot>
            </div>
            <div class="t-modal-footer" :style="footerStyle" v-show="isShowFoot">
              <slot name="footer">
                <button class="t-modal-btn t-modal-cancel" @click="cancel" >取消</button>
                <button class="t-modal-btn t-modal-ok" @click="ok" >确定</button>
              </slot>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        type: Boolean,
        default: false
      },
      closeable: {
        type: Boolean,
        default: true
      },
      title: {
        type: String,
        default: '温馨提示'
      },
      showTitle:{
        type:Boolean,
        default:true
      },
      showClose:{
        type:Boolean,
        default:true
      },
      footerStyle:{
        type:Object,
        default(){
          return {}
        }
      },
      contentStyle:{
        type:Object,
        default(){
          return {}
        }
      },
      firework: {
        type: Boolean,
        default: false
      },
      width: {
        type: [String],
        default: '5.3rem'
      },
      okText: {
        type: String,
        default: '确认'
      },
      cancelText: {
        type: String,
        default: '取消'
      },
    },
    data() {
      return {
        wrapShow: this.value,
        visible: this.value,
        isShowFoot:true
      }
    },
    methods: {
      close() {
        this.visible = false
        this.$emit('input', false)
      },
      cancel() {
        this.close()
        this.$emit('on-cancel')
      },
      ok() {
        this.close()
        this.$emit('on-ok')
      }
    },
    watch: {
      value(val) {
        this.visible = val
      },
      visible(val) {
        if (val === false) {
          this.timer = setTimeout(() => {
            this.wrapShow = false
          }, 300)
        } else {
          this.wrapShow = true
          if (this.timer) clearTimeout(this.timer)
        }
        this.isShowFoot=this.$parent.isShowFoot;
      }
    }
  }
  var image = new Image()
  image.src = '/images/modal/modal-hd.png'
</script>

<style lang="scss">
  @import '../../styles/libs/variable';

  .t-modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: $mask;
    z-index: 10000;
  }
  .t-modal-wrapper {
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10000;
    .t-modal {
      position: relative;
      color: #333;
    }
    .t-modal-close {
      display: block;
      position: absolute;
      bottom: -1.4rem;
      left: 2.2rem;
      right: 0;
      width: .6rem;
      height: .6rem;
      background: url('/images/icon/guanbi.png') no-repeat center bottom;
      background-size: contain;
    }
    .t-modal-firwork {
      z-index: 1;
      position: absolute;
      top: -.65rem;
      left: 0;
      right: 0;
      height: 1.8rem;
      background: url('/images/modal/firework.png') no-repeat center bottom;
      background-size: contain;
    }
    .t-modal-content {
      overflow: hidden;
      border-radius: .24rem;
    }
    .t-modal-header {
      position: relative;
      height: 1rem;
      line-height: 1rem;
      text-align: center;
      font-size: .48rem;
      font-weight: bold;
      color: white;
      background: url('/images/modal/modal-hd.png') no-repeat center;
      background-size: cover;
    }
    .t-modal-body {
      overflow-y: hidden;
      min-height: 2.38rem;
      max-height: 8.5rem;
      background: white;
      -webkit-overflow-scrolling: touch;
      font-family: "PingFang SC-Regular";
    }
    .t-modal-center {
      padding: .7rem .24rem;
      text-align: center;
      font-size: .32rem;
    }
    .t-modal-footer {
      /*text-align: center;*/
      /*font-size: .32rem;*/
      /*background: white;*/
      /*font-family: "PingFang SC-Regular";*/
      /*height: 1.12rem;*/
      /*line-height: 1.12rem;*/
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .32rem;
      border-top: 1px solid #e5e5e5;
      text-align: center;
      background: white;
      font-family: "PingFang SC-Regular";
      height: 1.32rem;
      line-height: 1.12rem;
      .t-modal-btn {
        flex: 1;
        height: .8rem;
        line-height: .7rem;
      }
      .t-modal-cancel{
        color: #005EED;
        text-align: center;
        height: .4rem;
        font-size: .28rem;
        line-height: .4rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
      }
      .t-modal-ok {
        font-family: PingFangSC-Medium, PingFang SC;
        text-align: center;
        height: .4rem;
        line-height: .4rem;
        color: #fff;
        font-weight: 500;
        font-size: .28rem!important;
        margin-left: 0!important;
      }
    }
  }
  .vertical-center-modal {
    display: flex;
    justify-content: center;
    align-items: center;
  }

</style>

<style>
  .fade-appear,
  .fade-enter-active,
  .fade-leave-active {
    animation-duration: .3s;
    animation-fill-mode: both;
    animation-play-state: paused
  }

  .fade-appear,
  .fade-enter-active {
    animation-name: ivuFadeIn;
    animation-play-state: running
  }

  .fade-leave-active {
    animation-name: ivuFadeOut;
    animation-play-state: running
  }

  .fade-appear,
  .fade-enter-active {
    opacity: 0
  }

  .fade-appear,
  .fade-enter-active,
  .fade-leave-active {
    animation-timing-function: linear
  }

  @keyframes ivuFadeIn {
    0% {
      opacity: 0
    }

    to {
      opacity: 1
    }
  }

  @keyframes ivuFadeOut {
    0% {
      opacity: 1
    }

    to {
      opacity: 0
    }
  }

  .ease-appear,
  .ease-enter-active,
  .ease-leave-active {
    animation-duration: .3s;
    animation-fill-mode: both;
    animation-play-state: paused
  }

  .ease-appear,
  .ease-enter-active {
    animation-name: ivuEaseIn;
    animation-play-state: running
  }

  .ease-leave-active {
    animation-name: ivuEaseOut;
    animation-play-state: running
  }

  .ease-appear,
  .ease-enter-active {
    opacity: 0
  }

  .ease-appear,
  .ease-enter-active,
  .ease-leave-active {
    animation-timing-function: linear;
    animation-duration: .2s
  }

  @keyframes ivuEaseIn {
    0% {
      opacity: 0;
      transform: scale(.9)
    }

    to {
      opacity: 1;
      transform: scale(1)
    }
  }

  @keyframes ivuEaseOut {
    0% {
      opacity: 1;
      transform: scale(1)
    }

    to {
      opacity: 0;
      transform: scale(.9)
    }
  }

</style>
